// rfce
import React,{useState,useEffect} from 'react'
import Appson from './Appson'
import Appson1 from './Appson1'
import {Provider} from "../utils/context"
// jsx html 和 js 的混写 jsx 语法 遇到<>解析html，遇到{}解析js
// let obj = {
//     name :"zhangsna"
// }
// 受控组件 首先是表单元素，input checkbox radio
// 受控组件 受状态控制的表单元素 
// 非受控组件 不受状态控制的表单元素 defaultValue onChange
function App() {
   let [val,setVal] = useState("")
   let [val1,setVal1] = useState("")
   let [name,setName] = useState("zhangsan")
   let [obj,setObj] = useState({
       name:"高启强",
       job:"卖鱼的"
   })
   let fn = ()=>{
       setName("lisii") // 异步的
    //    console.log(name);
   }
   let sonsendfa = (data,data1)=> {
        console.log(data,data1);
   }
   let changeVal = (e)=>{
        console.log(e);
        setVal(e.target.value)
   }
   let getVal = ()=> {
       console.log(val);
   }
   let changeVal1 = ()=> {

   }
   useEffect(()=>{
     
   },[]) // useEffcet 第二个参数是一个空数组的时候，可以模拟组件挂载完毕的生命周期
   useEffect(()=>{
       console.log(name);
   },[name])  // 依赖项发生改变，useEffect里的东西就执行
  return (
    <div style={{width:"100%",height:"100%"}}>

        <p>{name}</p>
        {/* 父组件标签上自定义一个属性 属性=属性值 */}
        {/* 数组是特殊的对象， typeof 数组返回”object“ ，typeof 函数返回的就是function */}
        <Appson send="我是父组件里的数据"  obj={obj} sonsendfa={sonsendfa}></Appson>
        <button onClick={fn}>修改name</button>
        <hr />
        <input type="text" value={val} onChange={changeVal}/>
        <button onClick={getVal}>获取输入框的值</button>
        <hr />
        <input type="text" defaultValue={val1} onChange={changeVal1}/>
        <hr />
        {/* Appson1 下的子组件，孙子组件，重孙子组件，都可以使用value  */} 
        {/* 该属性必须叫value，不能随便起名字 */}
        <Provider value={obj}>
            <Appson1></Appson1>
        </Provider>
       
    </div>
  )
}

export default App